<template>
    <div>
        <h1>商品显示</h1>
        商品分类
        <select v-model="info.flid">
            <option value="">请选择</option>
            <option :value="itme.Id" v-for="itme in lisr" :key="itme.Id">{{ itme.FLName }}</option>
        </select>

        时间<input type="date" v-model="info.con"> - <input type="date" v-model="info.end">

        价格<input type="text" v-model="info.max"> - <input type="text" v-model="info.min">

        <input type="button" value="查询" @click="getlist">
        <input type="button" value="批量删除" @click="delAll">
        <input type="button" value="批量上架" @click="delXG(true)">
        <input type="button" value="批量下架" @click="delXG(false)">

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="CheckedAll"></td>
                    <td>ID</td>
                    <td>商品名称</td>
                    <td>商品编码</td>
                    <td>分类</td>
                    <td>图片</td>
                    <td>售卖时间</td>
                    <td>商品备注</td>
                    <td>价格</td>
                    <td>时间</td>
                    <td>操作</td>
                </tr>

                <tr v-for="itme in data.list" :key="itme.Id">
                    <td><input type="checkbox" v-model="ids" :value="itme.Id" @change="CheckedOne"></td>
                    <td>{{ itme.Id }}</td>
                    <td>{{ itme.Name }}</td>
                    <td>{{ itme.Core }}</td>
                    <td>{{ itme.FLName }}</td>
                    <td> <img :src="itme.Img" width="100" height="100"></td>
                    <td>{{ itme.State == true ? "上架" : "下架" }}</td>
                    <td>{{ itme.ShopBZ }}</td>
                    <td>{{ itme.Money }}</td>
                    <td>{{ itme.DateTime }}</td>
                    <td><input type="button" value="删除" @click="del(itme.Id)" class="btn btn-danger">
                        <input type="button" value="下架" v-if="itme.State == true" class="btn btn-warning"
                            @click="updateStateOne(itme.Id, false)" />
                        <input type="button" value="上架" v-if="itme.State == false" class="btn btn-info"
                            @click="updateStateOne(itme.Id, true)" />
                    </td>
                </tr>
            </tbody>
        </table>
        <span><b>共{{ data.totalcount }}条</b></span>
        <span><b>每页{{ info.pagesize }}条</b></span>
        <span><b>共 {{ info.pageindex }}/{{ data.totalpage }}页</b></span>
        <input type="button" value="首页" @click="gopage(1)">
        <input type="button" value="上一页" @click="gopage(info.pageindex - 1)">
        <span v-for="itme in data.totalpage" @click="gopage(itme)">{{ itme }}</span>
        <input type="button" value="下一页" @click="gopage(info.pageindex + 1)">
        <input type="button" value="首页" @click="gopage(data.totalpage)">
        <input type="number" v-model="info.pageindex">
        <input type="button" value="跳转" @click="gopage(info.pageindex)">
        <select v-model="info.pagesize" @change="show">
            <option :value="itme" v-for="itme in arr">每页{{ itme }}条</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';
const rouder = useRouter();
let info: any = reactive({
    pageindex: 1,
    pagesize: 2,
    flid: '',
    max: '',
    min: '',
    con: '',
    end: ''
})

let checked: any = ref(false);
let ids: any = ref([]);

let data: any = reactive({
    list: [],
    totalcount: 0,
    totalpage: 0
})

let lisr: any = ref([]);

let arr: any = ref([2, 4, 6, 8, 10])
onMounted(() => {
    getlist();
    getlisr();
})
//==================下拉框
const getlisr = () => {
    axios({
        url: '/api/Shoping/GetFL',
        method: 'get'
    })
        .then((res) => {
            console.log(res);
            lisr.value = res.data
        })
        .catch((err) => {
            console.log(err);

        })
}


//==================显示
const getlist = () => {
    axios({
        url: '/api/Shoping/GetShop',
        method: 'get',
        params: info
    })
        .then((res) => {
            console.log(res);
            Object.assign(data, res.data);
        })
        .catch((err) => {
            console.log(err);

        })
}
//==================分页
const show = () => {
    info.pageindex = 1;
    getlist()
}
const gopage = (num: any) => {
    if (num < 1) {
        info.pageindex = 1;
        return;
    }
    if (num > data.totalpage) {
        num = data.totalpage;
        return;
    }
    info.pageindex = num;
    getlist()

}
//==================反选
const CheckedOne = () => {
    if (ids.value.length == data.list.length) {
        checked.value = true;
    }
    else {
        checked.value = false;
    }
}

//==================全选全不选
const CheckedAll = () => {
    checked.value = !checked.value;
    if (checked.value == true) {
        ids.value = data.list.map((itme: any) => {
            return itme.Id
        })
    }
    else {
        ids.value = [];
    }
}

//==================批量删除
const delAll = () => {
    let f = confirm("确认删除吗")
    if (f) {
        axios({
            url: '/api/Shoping/DELETE',
            method: 'delete',
            params: {
                id: ids.value.toString(),
            }
        })
            .then((res) => {
                console.log(res);
                if (res.data > 0) {
                    alert('删除成功');
                    getlist();
                    return;
                }
                else {
                    alert('删除失败');
                    return;
                }
            })
            .catch((err) => {
                console.log(err);

            })
    }
}
//==================批量修改
const delXG = (state: any, id?: any) => {
    let f = confirm("确认删除吗")
    if (f) {
        axios({
            url: '/api/Shoping/XG',
            method: 'get',
            params: {
                id: ids.value.toString(),
                state: state,

            }
        })
            .then((res) => {
                console.log(res);
                if (res.data > 0) {
                    alert('修改成功');
                    checked.value = false;
                    ids.value = [];
                    getlist();
                    return;
                }
                else {
                    alert('修改失败');
                    return;
                }
            })
            .catch((err) => {
                console.log(err);

            })
    }
}
//===================删除
const del = (id: any) => {
    axios({
        url: '/api/Shoping/Del',
        method: 'delete',
        params: {
            id: id,
        }
    })
        .then((res) => {
            console.log(res);
            if (res.data > 0) {
                alert('删除成功');
                getlist();
                return;
            }
            else {
                alert('删除失败');
                return;
            }
        })
        .catch((err) => {
            console.log(err);

        })
}
//================修改状态
const updateStateOne = (id: any, state: any) => {
    let f = confirm('请问您确定要修改状态吗？');
    if (f) {
        axios({
            url: '/api/Shoping/XG',
            method: 'get',
            params: {
                id: id,
                state: state,
            },
        })
            .then((res) => {
                console.log(res);
                if (res.data > 0) {
                    alert('修改状态成功');
                    getlist();
                } else {
                    alert('修改失败');
                    return;
                }
            })
            .catch((err) => {
                console.log(err);
            });
    }
};
</script>

<style scoped></style>